// src/pages/patient/widgets/remove/index.tsx
import styles from "@styles/editPatient.module.scss";
import { Dialog, Toast } from "antd-mobile";
import { useRemovePatientMutation } from "@store/apiSlice/patientApiSlice";
import React from "react";

interface Props {
    // 要删除的患者的 id
    id: string;
    // 要删除的患者的姓名
    name: string;
    // 控制弹框显示和隐藏
    setVisible: React.Dispatch<React.SetStateAction<boolean>>;
}

export default function RemovePatient({ id, name, setVisible }: Props) {
    // 用于删除患者信息
    const [removePatient] = useRemovePatientMutation();
    // 点击删除按钮时执行
    const removeHandler = async () => {
        if (
            // 和用户确认是否真的要删除
            await Dialog.confirm({
                title: "温馨提示",
                content: `您确认要删除 ${name} 患者信息吗?`,
            })
        ) {
            removePatient(id)
                .unwrap()
                .then((response) => {
                    // 删除失败
                    if (
                        typeof response.success !== "undefined" &&
                        response.success === false
                    ) {
                        // 用户提示
                        return Toast.show({ content: response.message });
                    }
                    // 删除成功 用户提示
                    Toast.show({ content: "患者信息删除成功" });
                    // 隐藏弹层
                    setVisible(false);
                });
        }
    };
    // 渲染视图
    return (
        <button className={styles.remove} onClick={removeHandler}>
            删除患者
        </button>
    );
}